<?php

use yii\bootstrap\BootstrapAsset;

BootstrapAsset::register($this);

use yii\bootstrap\BootstrapPluginAsset;

BootstrapPluginAsset::register($this);

?>
<script src="/static/library/plupload/plupload.full.min.js"></script>
<style>
    .video_box {
        margin: 45% 40%;
    }

    .upload_video_area {
        margin-top: 10px;
    }

</style>

<div class="content margin_top">
    <header class="header fixed_top bg_mx_green"></header>
    <form class="user" enctype="multipart/form-data">
        <div class="video_box_outside" id="video_box_outside" tabindex="2001">
            <div class="layer_point alert alert-success" role="alert" style="padding: 0;border: none">
                <dl id="video_loading" class="point clearfix" style="display: none;padding: 0 0 60px">
                    <dt style="" id="loading_bar">
                        <span class="loading_bar"><em id="percent" style="width: 27%;"></em></span>
                        <span id="percentnum" class="S_txt2 load_num">27%</span>
                    </dt>
                    <dd>
                        <p id="updesc">视频上传中...</p>
                        <p class="S_txt2"><label id="uploading_tip">上传速度取决于您的网速，请耐心等待。</label><a
                                    href="javascript:void(0);" id="video_upload_cancel" onclick="video_upload_cancel()">取消上传</a>
                        </p>
                    </dd>
                </dl>
            </div>
            <div class="video_box">
                <a class="photo_upload_close" href="javascript:void(0);"
                   onclick="fadeout_div('#video_box_outside')"></a>
                <div id="video_upload_area">
                    <div class="video_textarea_upload" id="video_textarea_upload">
                        <div class="video_upload_words">
                            <a class="btn btn-success" id="video_upload_btn" style="position: relative; z-index: 1;">选择视频</a>
                            <a class="video_name_box" id="video_name_box" href="javascript:void(0)">
                                <em id="video_file_name"></em>
                                <span class="photo_upload_close" onclick="reupload_video()"
                                      href="javascript:void(0);"></span>
                            </a>
                            <div id="html5_1bqk71mn911bj19rg1lgjmljagq3_container" class="moxie-shim moxie-shim-html5"
                                 style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; overflow: hidden; z-index: 0;">
                                <input id="html5_1bqk71mn911bj19rg1lgjmljagq3" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"
                                       accept="video/mpeg,video/x-m4v,video/mp4,video/x-flv,video/3gpp,video/quicktime,video/avi,.rmvb,video/x-matroska,video/x-ms-wmv">
                            </div>
                        </div>
                        <span id="video_words_num"></span>
                    </div>

                    <div class="upload_video_area" id="upload_video_area">
                        <a id="upload_video" class="btn disabled btn-primary" href="javascript:void(0);">开始上传</a>
                    </div>
                    <div class="arrow_layer"><span class="arrow_top_area"><i class="arrow_top_bg"></i><em
                                    class="arrow_top"></em></span></div>
                </div>
                <div id="video_iput"></div>
            </div>
    </form>
</div>


<script>
    <?php $this->beginBlock('zhexian') ?>

    // 页面初始化
    var evalinfo = doT.template($("#info_template").text());
    var evalToast = doT.template($("#toast_template").text());
    loadheadbar("个人资料");

    var uploader_video = new plupload.Uploader({//创建实例的构造方法
        runtimes: 'gears,html5,html4,silverlight,flash', //上传插件初始化选用那种方式的优先级顺序
        browse_button: ['video_upload_btn'], // 上传按钮
        url: "<?= \yii\helpers\Url::to(['/business/person/upvideo','pigid'=>Yii::$app->request->get('pigid')]) ?>", //远程上传地址
        flash_swf_url: 'js/plugins/plupload/Moxie.swf', //flash文件地址
        silverlight_xap_url: 'js/plugins/plupload/Moxie.xap', //silverlight文件地址
        filters: {
            max_file_size: '10mb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
            mime_types: [//允许文件上传类型
                {title: "files", extensions: "mpg,m4v,mp4,flv,3gp,mov,avi,rmvb,mkv,wmv"}
            ]
        },
        //       chunk_size: "5mb", //分片上传文件时，每片文件被切割成的大小，为数字时单位为字节。也可以使用一个带单位的字符串，如"200kb"。当该值为0时表示不使用分片上传功能
        multi_selection: false, //true:ctrl多文件上传, false 单文件上传
        init: {
            FilesAdded: function (up, files) { //文件上传前

                $("#video_name_box").css({"display": "inline-block"});
                $("#video_upload_btn").hide();
                $("#video_file_name").text(files[0].name);
                $("#upload_video").removeClass("disabled");

                $("#upload_video").click(function () {
                    uploader_video.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
                })
                $("#video_iput").attr("file_id", files[0]['id'])
                //                    console.log(files);
            },
            UploadProgress: function (up, file) { //上传中，显示进度条
                $("#video_loading").show();
                $('#upload_video_area,#video_upload_area').hide();
                var percent = file.percent;
                $("#percent").css({"width": percent + "%"});
                $("#percentnum").text(percent + "%");
                $("#video_success").hide();

            },
            FileUploaded: function (up, file, info) { //文件上传成功的时候触发
                $("#video_loading").hide();
//                if (info.response == '0') {
                    alert('生成成功');
                    window.location.href = "/business/person/pig";
                    return false;
//                }else{
//                    alert('生成失败');
//                }
                console.log(info);
//                var data = eval("(" + info.response + ")");//解析返回的json数据
//                $("#video_iput").html("<input type='hidden'id='video_file' value='" + data.pic + "'/><input type='hidden'id='video_name' value='" + data.name + "'/>");
//                sleep(3000);

            },
            Error: function (up, err) { //上传出错的时候触发
                alert(err.message);
            }
        }
    });
    uploader_video.init();

    function showVideoUploadBox(obj) { //显示上传弹出层
        var left = obj.offset().left;
        var top = obj.offset().top + 26;
        var z_index_init = 1000;
        if ($("#post_box").css("display") == 'block') {
            z_index_init = 3000;
        }
        $("#photo_upload_box_outside").css({"z-index": z_index_init});

        $("#video_box_outside").css({"left": left, "top": top, "z-index": z_index_init + 1}).show();
        $("#video_upload_area").show();
        $("#video_loading,#video_success").hide();
        reupload_video();
    }

    function reupload_video() { //重新上传
        $('#video_upload_btn').show();
        $('#video_name_box').hide();
        $("#upload_video_area").show().addClass("disabled");
        $("#video_text").val("");
        $("#video_words_num").text(0);
        $("#video_success").hide();
        $("#video_file,#video_name").val("");
    }

    function checkVideoText(value) {
        var length = value.length;
        var other = 130 - length;
        if (length > 0) {
            $("#video_words_num").html(other);
        } else {
            $("#video_words_num").html("<span class='red'>" + other + "</span>");
        }
    }

    function video_upload_cancel() {  //取消上传
        uploader_video.stop();
        $("#video_loading,#video_name_box").hide();
        $("#video_upload_area,#video_upload_btn").show();
        $("#upload_video_area").show();
        $("#upload_video").addClass("disabled");
        $("#video_text").val("");
        $("#video_words_num").text(0);
        $("#video_success").hide();
        $("#video_file,#video_name").val("");
        var file_id = $("#video_iput").attr("file_id");
        var obj_file = uploader_video.getFile(file_id);
        uploader_video.removeFile(obj_file);
    }

    function fadeout_div(id) {
        $(id).fadeOut();
    }

    <?php $this->endBlock('zhexian') ?>
    <?php $this->registerJs($this->blocks['zhexian'], \yii\web\View::POS_END) ?>

</script>


